<template>
	<view class="zh-sub-account">
		<view class="pt-200" v-if="subAccountData.total === 0">
			<empty-data :imgSrc="IMG_URL + '/status/no_list.png'"></empty-data>
		</view> 
		<view class="list"  v-if="subAccountData.total > 0">
			<view class="item display-flex justify-between align-center" v-for="item in subAccountData.list" :key="item.Id" @click="navigateTo('/pages/userCenter/subAccount/add?id=' + item.Id + '&userName=' + item.UserName + '&nickName=' + item.Nick)">
				<view class="left font-28">
					<view class="des">
						<text class="font-999">账号：</text>
						<text class="font-302d2d">{{ item.UserName }}</text>
					</view>
					<view class="des">
						<text class="font-999">姓名：</text>
						<text class="font-302d2d">{{ item.Nick }}</text>
					</view>
				</view>
			<!-- 	<view class="right">
					<image src="@/static/icons/delete_icon.png" class="delete-icon" @click="delSubAccount(item.Id)"/>
					<image src="@/static/icons/edit_icon.png" class="edit-icon" @click="navigateTo('/pages/userCenter/subAccount/add?id=' + item.Id + '&userName=' + item.UserName + '&nickName=' + item.Nick)"/>				
				</view> -->
			</view>
			<view class="load-more">
				<u-load-more ref="loadMoreRef"></u-load-more>
			</view>
		</view>
		<view class="bottom-fixed">
			<button class="app-primary-button" hover-class="app-primary-button-active" @click="navigateTo('/pages/userCenter/subAccount/add')">新增</button>
		</view>
	</view>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
	import { auth } from '@/api'
	import { tip } from '@/utils'
	import type { SubAccountData } from '@/@type/user'
	import { onLoad, onPullDownRefresh, onReachBottom } from '@dcloudio/uni-app'
	import emptyData from '@/pages/components/empty-data'
	import { IMG_URL } from '@/utils/constant'
	
	const loadMoreRef = ref()
	const subAccountData: any = reactive({
		query:{
			noLoading:false
		},
		params:{
			pageNum:1,
			pageSize:10,
			reasonable:true,
		},
		delParams: {
			userId:"",
		},
		list:[],
		total:''
	})

	onLoad((options:any) => {
		subAccountList()
	})
	
	uni.$on('subAccountAdd', (res:any) => {
		refresh()
	})

	const subAccountList = (cb?:Function) => {
		auth.getSubAccountList(subAccountData.query, subAccountData.params).then((res:any) => {
			cb && cb()
			subAccountData.list = [...subAccountData.list,...res.rows],
			subAccountData.total = res.total
		})
	}
	
	const delSubAccount = (id: string) => {
		tip.confirm('是否删除该子账号').then(() => {
			subAccountData.delParams.userId = id
			auth.setSubAccountDel(subAccountData.delParams).then((res: any) => {
				tip.showToast('删除成功！')
				refresh()
			})
		})
		
	}

	onReachBottom(() => {
		if(subAccountData.params.pageNum * subAccountData.params.pageSize > subAccountData.total) return loadMoreRef.value.changeStatusNoMore()
		subAccountData.params.pageNum++
		loadMoreRef.value.changeStatusLoading()
		setTimeout(() => {
			subAccountData.query.noLoading = true
			subAccountList(() => {
				loadMoreRef.value.changeStatusNoLoading()
				if(subAccountData.params.pageNum * subAccountData.params.pageSize > subAccountData.total) return loadMoreRef.value.changeStatusNoMore()
			})
		}, 300)
	})

	onPullDownRefresh(() => {
		refresh()
		setTimeout(function () {
			uni.stopPullDownRefresh()
		}, 1000)
	})
		
	const refresh = () => {
		subAccountData.query.noLoading = false
		if(loadMoreRef.value) loadMoreRef.value.changeStatusNoLoading()
		subAccountData.params.pageNum = 1
		subAccountData.list = []
		subAccountList()
	}

	const navigateTo = (url:string) => {
		uni.navigateTo({url:url})
	}
</script>

<style lang="scss" scoped>
	.zh-sub-account {
		.list {
			.item {
				padding: 30rpx 30rpx;
				margin-top: 20rpx;
				background:$uni-bg-card-color;
				.left {
					.des:nth-child(2) {
						margin-top: 13rpx;
					}
				}
				.right {
					.delete-icon {
						width: 24rpx;
						height: 26rpx;
					}
					.edit-icon {
						width: 31rpx;
						height: 29rpx;
						margin-left: 45rpx;
					}
				}
			}
		}
	}
</style>
